<template>
    <div style="padding: 40px 20px 10px 20px;background-image: linear-gradient(240deg, #fff 10%, #f3f4f5 200%);">
        <h1 class="title">问卷搜索</h1>
        <el-input v-model="form.title" size="large" style="width:100%;margin-bottom: 30px;" placeholder="请输入问卷名称或关键词"
            @change="getQNListByType" class="input-with-select">
            <template #append>
                <el-button @change="getQNListByType">
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
    </div>
    <div style="padding: 10px 20px;background-image: linear-gradient(to top, #fff 20%, #f3f7f8 100%);">
        <h1 class="title">问卷中心</h1>
        <div style="background-color: #fff;padding:10px;margin:10px 0px;border-radius: 8px;">
            <el-segmented v-model="form.type" :options="qnTypeList" size="large" @change="getQNListByType" />
        </div>
        <div>
            <div v-if="qnList?.length > 0">
                <el-row :gutter="8">
                    <el-col :span="6" :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="qn in qnList">
                        <div style="padding:8px 0px">
                            <el-card shadow="hover" @click="() => { this.$router.push(`/doQN/${qn.id}`) }"
                                :body-style="{ Padding: '0px' }">
                                <div style="height: 300px;overflow-y: auto;">
                                    <doQN :id="qn.id" style="height: 300px;" mode="review" />
                                </div>
                                <el-divider border-style="dashed"></el-divider>
                                <div>
                                    <h1 class="title">{{ qn.title }}</h1>
                                </div>
                                <div style="margin:10px 0px"><small>共{{ qn.questionList.length }}题，题型包含{{ [...new
                                    Set(qn.questionList.map((i) => {
                                        return i.typeCN
                                    }))].join(',') }}</small></div>
                                <div>

                                    <el-alert type="success" :closable="false">
                                        <el-text line-clamp="1">{{ qn.desc || '请认真作答' }}</el-text>
                                    </el-alert>
                                </div>
                                <div style="margin:10px 0px;display: flex;">
                                    <label></label><el-avatar :size="20"
                                        :src="imgBaseURL + qn.avatar"
                                        style="margin-right: 4px;" />
                                    <label>{{ qn.nickName }}</label>
                                </div>
                                <label
                                    style="margin:10px 0px;font-size: 14px;display: flex;align-items: center;justify-content: space-between">
                                    <small>{{ qn.createTime.replace('T', ' ') }}</small>

                                    <img src="../../assets/logoH.png" style="max-width: 120px;width:30%" /></label>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <el-empty description="暂无问卷"></el-empty>
            </div>
        </div>
    </div>
</template>
<script>
import { POST } from '../../util/axios.js'
import doQN from './doQN.vue'
export default {
    components: { doQN },
    data() {
        return {
            form: {
                type: "",
                title: ""
            },
            qnList: [],
            qnTypeList: [],
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL
        }
    },
    methods: {
        async getQNListByType() {
            let rs = await POST('/questionnaire/getQNListByForm', 'POST', this.form, false, null, false)
            this.qnList = rs.data
        },
        async getQNType() {
            let rs = await POST('/questionnaire/getQNType', 'POST', {}, false, null, false)
            this.qnTypeList = ['综合']
            this.qnTypeList = this.qnTypeList.concat(rs.data.map((i) => { return i.type }))
            this.form.type = '综合'
            this.getQNListByType()
        },
    },
    mounted() {
        this.getQNType()
        this.getQNListByType()
    }
}
</script>
<style scoped>
.el-input-group__append {
    padding: 0px 20px !important;
}
</style>
